<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/iconfont.css">
  <link rel="stylesheet" href="./css/bootstrap.min.css" />
  <link rel="stylesheet" href="./css/public.css">
  <link rel="stylesheet" href="./css/css/public.css">
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="./css/css/shop.css">
  <link rel="stylesheet" href="./css/goodsDetails.css">
</head>

<body>
  <header>
    <div class="container">
      <div class="row">
        <div class="col-md-2">
          <a href="index.html"><span class="logo-text">DJI 大疆官网</span></a>
          <a href="javascript:void(0)" class="Logined none">
            <span>
              欢迎,<span class="userName"></span>
            </span>
          </a>
        </div>
        <div class="col-md-10">
          <div class="header-right">
            <span><a href="my_account.html" class="myAccount none">我的账号</a></span>
            <a href="login.html" class="unLogin"><span>登录</span></a>
            <span class="line"></span>
            <a href="shoppingCar.html"><span class="car">购物车</span></a>
            <span class="iconfont icon-home"></span>
          </div>
        </div>
      </div>
    </div>
  </header>
  <section class="pt-100 pb-100">
    <div class="container">
      <div class="row">
        <div class="col-lg-6">
          <div class="box clearfix">
            <div class="box-left box">
              <img data-src="" src="" alt="">
              <div class="bg"></div>
              <div class="box-right box">
                <img data-src="" src="" alt="">
              </div>
            </div>
            <div class="img-list">
              <div class="little-img">
                <img data-src="" src="" alt="">
              </div>
              <div class="little-img">
                <img data-src="" src="" alt="">
              </div>
              <div class="little-img">
                <img data-src="" src="" alt="">
              </div>
              <div class="little-img">
                <img data-src="" src="" alt="">
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="star">
            <span class="iconfont icon-star"></span>
            <span class="iconfont icon-star"></span>
            <span class="iconfont icon-star"></span>
            <span class="iconfont icon-star"></span>
            <span class="iconfont icon-star"></span>
          </div>
          <div class="product-title">
            <h2>
              <a href=""></a> <span class="subtitle"></span>
            </h2>
          </div>

          <div class="product-price">
            <h3 class="new-price"></h3>
            <h5 class="old-price">$30.1</h5>
          </div>
          <div class="product-description">
            <p></p>
          </div>
          <div class="list-product-group">
            <ul>
              <li>
                <span>Size:</span>
                <div class="circle size">L</div>
                <div class="circle size">M</div>
                <div class="circle size">S</div>
              </li>
              <li style="line-height: 35px;">
                <span>库存还有:<span class="stock"></span></span>
              </li>
              <div class="clear"></div>
            </ul>
          </div>
          <div class="goodsNum">
            <span>商品数量:</span>
            <button class="sub pointer changeNums">-</button>
            <div class="nums circle">1</div>
            <button class="add pointer changeNums">+</button>
          </div>
          <div class="addShoppingCar">
            <button onclick="addCar()">加入购物车</button>
          </div>
        </div>
      </div>
    </div>
  </section>
  <script src="./js/url.js"></script>
  <script src="./js/jquery-3.4.1.min.js"></script>
  <script src="./js/public.js"></script>
  <script>
    function init() {
      showGoods()
      LoginOr()
    }
    init()
    function showGoods() {
      let product_id = localStorage.product_id
      $.ajax({
        type: "POST",
        url: productUrl,
        data: { 'type': 'detail', 'product_id': product_id },
        dataType: 'json',
        xhrFields: { withCredentials: true },
        success: function (res) {
          console.log(res)
          if (res.status === 0) {
            $('.product-title>h2>a').text(res.data.name)
            $('.product-price h3').text(`$${res.data.price}`)
            $('.product-description p').text('商品详情')
            $('.subtitle').text(res.data.subtitle)
            $('.stock').text(res.data.stock)
            $('.box-left,.box-right').find('img').attr('src', `${imgUrl + res.data.main_image}`)
            $('.little-img>img').attr({ 'data-src': `${imgUrl + res.data.main_image}`, 'src': `${imgUrl + res.data.main_image}` })
          }


        },
        error: function () {
          console.log('错误')
        }
      })
    }
  </script>
  <script>
    $(".box-left").mousemove(function () {
      $('.box-right>img').css('background-color', '#fff')
      var LeftboxT = $(".box-left").offset().top;
      var LeftboxL = $(".box-left").offset().left;
      var Top = event.pageY - LeftboxT - $(".bg").height() / 2;
      var Left = event.pageX - LeftboxL - $(".bg").width() / 2;
      var beishu = $(".box-right img ").width() / $(".box-right ").width();
      if (Top <= 0) {
        Top = 0;
      }
      if (Left <= 0) {
        Left = 0;
      }
      if (Top > $(".box-left").height() - $(".bg").height()) {
        Top = $(".box-left").height() - $(".bg").height();
      }
      if (Left > $(".box-left").width() - $(".bg").width()) {
        Left = $(".box-left").width() - $(".bg").width();
      }
      $(".bg").css({ display: "block", top: Top, left: Left });
      $(".box-right").css("opacity", "1");
      $(".box-right img").css({ top: -Top * beishu, left: -Left * 2 });
    });
    $(".box-left").mouseleave(function () {
      $(".bg").css("display", "none");
      $(".box-right").css("opacity", "0");
    });
    var Index = 0;
    $(".left a").click(function () {
      if (Index < 0) {
        Index++;
        var juLi = Index * 87;
        $(".cont-box ul").css("margin-left", juLi);
      }
    });
    $(".right a").click(function () {
      if (Index > -5) {
        Index--;
        var juLi = Index * 87;
        $(".cont-box ul").css("margin-left", juLi);
      }
    });
  </script>
  <script>
    $('.little-img').mouseenter(function () {
      $(this).css("border-color", "#000")
      $(this).siblings().css("border-color", "transparent")
      var src = $(this).find("img").attr("data-src")
      console.log(src)
      $(".box-left>img").attr("src", src);
      $('.box-right>img').attr("src", src);
    })
  </script>
  <script>
    let nums = 1
    $('.add').click(function () {
      nums++;
      $('.nums').text(nums)
    })
    $('.sub').click(function () {
      if (nums > 1) {
        nums--;
        $('.nums').text(nums)
      }
    })
  </script>
  <script>
    //添加购物车
    function addCar() {
      let count = nums
      let product_id = localStorage.product_id
      // console.log(count)
      // console.log(localStorage.product_id)
      $.ajax({
        type: 'POST',
        xhrFields: { withCredentials: true },
        url: carUrl,
        dataType: 'json',
        data: { 'type': 'add', 'product_id': product_id, 'count': count },
        success: function (res) {
          console.log(res)
          if (res.status === 0) {
            alert('购物车添加成功')
            console.log('添加成功')
          } else {
            alert('用户未登录')
          }
        },
        error: function () {
          console.log('错误')
        }
      })
    }
    // addCar()
  </script>
</body>

</html>